<template>
	<view class="">
		<view class="has_pays">
			<view class="hs_pay">
				{{orderInfo.pay_status_text}}
				<view class="hs_paymsg">您的宝贝正在整装待发</view>
			</view>
		</view>
		<view class="pay_msg">
			<view class="shr">收货人：{{orderInfo.realname}}<text>&nbsp;&nbsp;</text>{{orderInfo.mobile}}</view>
			<view class="sh_addr">收货地址：<text>&nbsp;&nbsp;</text>{{addressData.province_text+addressData.city_text+addressData.zone_text+addressData.address}}</view>
		</view>

		<view class="pay_price">
			<p class="pay_zj">
				已支付：<span class="bigprice">
					<font style="font-size:18px">¥</font>{{orderInfo.pay_amount}}
				</span>
			</p>
			<view class="order_succ_a">
				<navigator open-type="navigate" class="check_order" :url="'/pages/jewel/order/orderdetail?order_id='+orderInfo.id">查看订单</navigator>
				<navigator open-type="switchTab" class="check_order" url='/pages/jewel/index/index'>返回首页</navigator>
			</view>
		</view>
		
		<!-- 点击隐藏事件 hide_perfect -->
		<view name='infoPannel'>
		  <view class="flick-menu-mask" :class="show_class" @tap='hide_perfect'></view>
		  <view class="input_box" :class="show_class">
			<view class="title">完善身份证信息</view>
			<view class="input_div"><input placeholder='真实名称' @blur='log_nickname' type="text" class="nickname" confirm-type='done' :value="cardinfo?cardinfo.realname:''"/></view>
			<view class="input_div"><input placeholder='身份证' @blur='log_idcard' type="idcard" class="idcard" confirm-type='done' :value="cardinfo?cardinfo.idcard:''"/></view>
			<view class="msg">
			  为保障您享珠宝的合法权益，请输入真实资料
			</view>
			<view class="submit" @tap='save_idcard'>提交</view>
		  </view>
		</view>
		<navigator v-if="orderInfo.is_shangwu_zone" :url="'/pages/jewel/share/share_list?order_no=' + orderInfo.order_no">
			<image src="../../../static/images/share/share_list_banner.png" mode="" class="share_list_banner.png"></image>
		</navigator>
		<view class="m-loading" v-if="bIsShowLoading">
		    <image src="../../../static/images/loading.gif" mode="widthFix"></image>
		    <text>加载中</text>
		</view>
		
	</view>

</template>

<script>
	import hl from '@/common/common_zb.js';
	export default {
		data() {
			return {
				orderInfo: [],
				bIsShowLoading: false,
				addressData: [],
				show_class: '',		// 显示填写身份证框
				nickname: '',	// 身份证名称
				idcard: '',	// 身份证号码
				cardinfo: [],	// 身份证信息
				isGoodType: hl.isGoodsTpye(),
			}
		},
		onLoad(options) {
			let order_no = options.order_no;
			let that = this;
			if(order_no) {
				this.bIsShowLoading = true;
				new Promise((resolve, reject) => {
					hl.get('order/order_success', {order_no: order_no}, true, function (res){
						let resdata = res.data;
						that.orderInfo = res.data.data;
						that.cardinfo = res.data.data.cardinfo;
						if(that.cardinfo != null) {
							that.idcard = that.cardinfo.idcard;
							that.nickname = that.cardinfo.realname;
						}
						resolve(that.orderInfo.address_id);
					})
				}).then((address_id)=> {
					hl.get('member/address_view',{id: address_id}, true, function(res){
						that.addressData = res.data.data;
						that.bIsShowLoading = false;
					});
				})
				
			}
		},
		methods: {
			// 显示完善身份证框
			idcard_perfect(){
				this.show_class = 'show_class';
			},
			hide_perfect(){
				this.show_class = '';
			},
			// 记录真实名称
			log_nickname(e){
				this.nickname = e.target.value;
			},
			// 记录身份证号码
			log_idcard(e){
				this.idcard = e.target.value;
			},
			// 保存身份证信息
			save_idcard(){
				let that = this;
				let data = {order_id: that.orderInfo.id, idcard: this.idcard, nickname: this.nickname};
				hl.post('order/insert_order_user_data', data, true, function(res){
					let resdata = res.data;
					setTimeout(function(){
						if(resdata.code != '-1') {
							that.hide_perfect();
						}
					}, 1000);
					hl.showToast(resdata.msg);
				})
			}
		}
	}
</script>

<style>
	.has_pays {
		overflow: hidden;
		padding: 20rpx;
		background-color: #bea374;
	}

	.hs_pay {
		color: #fff;
		font-size: 26rpx;
		margin: 15rpx 15rpx 7rpx 15rpx;
	}

	.hs_paymsg {
		color: #fff;
		font-size: 26rpx;
	}

	.pay_msg {
		overflow: hidden;
		padding: 10px;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	.shr {
		color: #666;
		font-size: 26rpx;
	}

	.sh_addr {
		padding: 4px 0;
		color: #777;
		font-size: 28rpx;
	}

	.pay_price {
		overflow: hidden;
		background-color: #fff;
		padding: 10rpx;
	}

	.pay_zj {
		font-size: 26rpx;
		margin: 5rpx 0 15rpx 0;
	}

	.order_succ_a {
		overflow: hidden;
		width: 100%;
		text-align: center;
	}

	.check_order {
		width: 248rpx;
		line-height: 70rpx;
		height: 70rpx;
		border: 1px solid #999;
		display: inline-block;
		text-align: center;
		margin: 0 auto;
		border-radius: 5rpx;
		color: #666;
		font-size: 28rpx;
		margin-right: 20rpx
	}

	.bigprice {
		color: #bea374;
		font-size: 48rpx;
	}

	.order_succ_a {
		overflow: hidden;
		width: 100%;
		text-align: center;
		margin-top: 20rpx;
	}
	
	/* 弹出框 */
	.flick-menu-mask {
	    width: 100%;
	    height: 120%;
	    min-height: 100%;
	    position: fixed;
	    left: 0;
	    top: 0;
	    background: rgba(0,0,0,.5);
	    z-index: 200;
	    display: none
	}
	.input_box {
	    background: #fff;
	    z-index: 999;
	    height: 430rpx;
	    width: 80%;
	    margin: 0 auto;
	    position: absolute;
	    top: 25%;
	    left: 10%;
	    border-radius: 4rpx;
	    font-size: 26rpx;
	    display: none
	}
	.input_box input {
	    height: 60rpx;
	    border-radius: 4rpx;
	    border: 1px solid #ccc;
	    margin-bottom: 20rpx;
	    padding-left: 18rpx;
	}
	.show_class{
	  display: block
	}
	.title {
	    height: 72rpx;
	    line-height: 72rpx;
	    text-align: center;
	    margin-bottom: 36rpx;
	    border-bottom: 1rpx solid #eee
	}
	.input_div {
	    width: 90%;
	    margin: 0 auto;
	}
	.input_div .view-span {
	    margin-right: 20rpx;
	    color: #666;
	    display: inline-block
	}
	.msg {
	    width: 100%;
	    font-size: 22rpx;
	    clear: both;
	    position: absolute;
	    bottom: 80rpx;
	    height: 50rpx;
	    line-height: 50rpx;
	    background: #fff6e8;
	    overflow: hidden;
	    border-top: 2rpx solid #f2ddbc;
	    text-align: center;
	    color: #666;
	}
	.submit {
	    width: 100%;
	    height: 80rpx;
	    background: #A40B1D;
	    text-align: center;
	    line-height: 80rpx;
	    color: #fff;
	    position: absolute;
	    bottom: 0;
	}
	.share_list_banner.png{
		width: 750rpx;
		height: 214rpx;
		margin-top: 20rpx;
	}
</style>
